<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap.css">
    <script src="../jquery2.1.1.min.js"></script>
    <script src="../bootstrap.js"></script>
</head>


<body>

<div id="bbb">222</div>
<table class="table">
    <caption>上下文表格布局</caption>
    <thead>
    <tr style="width: 50px">
        <th >姓名</th>
        <th >年龄</th>
    </tr>
    </thead>

    <tbody class="rol" id="aaa">

    </tbody>


</table>


<script>

    /*内容*/
    var list=[
        {'one':'张三','two':18},
        {'one':'李四','two':19},
        {'one':'王五','two':20},
    ]

    /*bootstrap中的样式*/
    var classname1=['active','success','danger']


    var str='';

    for(var i in list){

        /*  '+ +'  拼接   这种兼容性好 */
        str += ' <tr class="'+classname1[i]+'"> ' +
            '<td>'+list[i].one+'</td> ' +
            '<td>'+list[i].one+'</td>' +
            ' </tr>'
    }



    $('#aaa').append(str);


/*innerText  是 dom对象的方法 jquery是一个伪数组 里面是 dom对象*/
    console.log($('#bbb')[0].innerText);
    console.log($('#aaa')[0].innerHTML);



</script>


</body>
</html>